Vue.js-Vue实例

推荐阅读原文 学习笔记：Vue实例

Vue实例

组件间通信

<p data-height="265" data-theme-id="0" data-slug-hash="wjXLMa" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="组件间通信" class="codepen">See the Pen 组件间通信 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

用户信息表

<p data-height="365" data-theme-id="0" data-slug-hash="zjagOy" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="zjagOy" class="codepen">See the Pen zjagOy by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

图书电商数据

<p data-height="565" data-theme-id="0" data-slug-hash="zjaVWL" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="图书电商数据" class="codepen">See the Pen 图书电商数据 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

渲染微信精选数据

<p data-height="565" data-theme-id="0" data-slug-hash="WJyqmO" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="渲染微信精选数据" class="codepen">See the Pen 渲染微信精选数据 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

图书管理系统

<p data-height="565" data-theme-id="0" data-slug-hash="NMzQjy" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="图书管理系统" class="codepen">See the Pen 图书管理系统 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

模态窗口-课程表

<p data-height="365" data-theme-id="0" data-slug-hash="KReORr" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="模态窗口-课程表" class="codepen">See the Pen 模态窗口-课程表 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

filterBy过滤器

<p data-height="265" data-theme-id="0" data-slug-hash="MGXNdM" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="filterBy过滤器" class="codepen">See the Pen filterBy过滤器 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

更新信息表

<p data-height="565" data-theme-id="0" data-slug-hash="odMvNZ" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="更新信息表" class="codepen">See the Pen 更新信息表 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

猜数字游戏

<p data-height="265" data-theme-id="0" data-slug-hash="dejyNw" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="猜数字游戏" class="codepen">See the Pen 猜数字游戏 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

弹窗组件

<p data-height="465" data-theme-id="0" data-slug-hash="MGBWEE" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="弹窗组件" class="codepen">See the Pen 弹窗组件 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

菜单组件

<p data-height="365" data-theme-id="0" data-slug-hash="mLjdLd" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="菜单组件" class="codepen">See the Pen 菜单组件 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

网格组件

<p data-height="325" data-theme-id="0" data-slug-hash="QrBwba" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="网格组件" class="codepen">See the Pen 网格组件 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

树形视图

<p data-height="265" data-theme-id="0" data-slug-hash="aGjzdr" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="树形视图" class="codepen">See the Pen 树形视图 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

可伸缩性的 Header

<p data-height="565" data-theme-id="0" data-slug-hash="qYyErB" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="可伸缩性的 Header" class="codepen">See the Pen 可伸缩性的 Header by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

内嵌组件

<p data-height="265" data-theme-id="0" data-slug-hash="QrBwgr" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="内嵌组件" class="codepen">See the Pen 内嵌组件 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

SVG 图表

<p data-height="565" data-theme-id="0" data-slug-hash="JvBoOo" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="SVG 图表" class="codepen">See the Pen SVG 图表 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

实时 deepstreamHub

<p data-height="565" data-theme-id="0" data-slug-hash="dejPJM" data-default-tab="js,result" data-user="whjin" data-embed-version="2" data-pen-title="实时 deepstreamHub" class="codepen">See the Pen 实时 deepstreamHub by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>